@use 'sass:color';
@import '../../../../styles/modules/all';

bookmark-tree {
  --color-bookmark-tree-root-bg: rgba(#{hex2rgb($color-text2-default)}, 0.3);
  --color-bookmark-tree-root-text: #{$color-text1-default};
  --color-bookmark-tree-folder-bg: var(--color-separator-bg);
  --color-bookmark-tree-folder-text: #{$color-text1-default};
  --color-bookmark-tree-folder-icon: #{$color-bg2-default};
  --color-bookmark-tree-bookmark-hover: #{color.scale($color-bg2-default, $lightness: 70%, $saturation: 50%)};

  @include theme-dark {
    --color-bookmark-bg: var(--color-separator-bg);
    --color-bookmark-tree-root-bg: #{$color-bg2-dark};
    --color-bookmark-tree-root-text: #{$color-text2-dark};
    --color-bookmark-tree-folder-bg: var(--color-separator-bg);
    --color-bookmark-tree-folder-text: #{$color-text2-dark};
    --color-bookmark-tree-folder-icon: rgba(#{hex2rgb($color-text1-dark)}, 0.6);
    --color-bookmark-tree-bookmark-hover: rgba(#{hex2rgb($color-text3-dark)}, 0.4);
  }

  &.root > .folder > .bookmark-content {
    background-color: var(--color-bookmark-tree-root-bg);
  }

  bookmark {
    &.folder {
      box-shadow: none;
      color: var(--color-bookmark-tree-root-text);
      max-height: none;
      transition: background-color ease-in-out 0.2s;

      &.open {
        & > .bookmark-content > .bookmark-heading {
          margin-bottom: 0.75rem;
        }
      }

      & > .bookmark-content {
        background-color: var(--color-bookmark-tree-folder-bg);
        padding: 0.5rem 1rem;

        & > .bookmark-heading {
          color: var(--color-bookmark-tree-folder-text);
          margin-right: 0;
          padding-left: 1.5rem;
          padding-right: 1.5rem;

          icon {
            @include valign;

            font-size: 0.9em;

            &.chevron {
              color: var(--color-bookmark-tree-folder-icon);
              font-size: 1.2em;
              opacity: 0;
              right: 0;
            }

            &.folder {
              left: 0;
              top: -0.1em;
            }
          }

          @media (hover: hover) {
            &:hover {
              cursor: pointer;

              &:not(.opening) icon.chevron {
                opacity: 0.6;
              }
            }
          }
        }

        .empty {
          font-style: italic;
          margin: 0.25rem 0 0;
          text-align: center;
        }

        .spinner-border {
          @include spinner-colour(var(--color-bookmark-tree-folder-icon));
          @include valign;

          opacity: 0.6;
          right: 0;
        }
      }
    }

    @media (hover: hover) {
      &:not(.folder) {
        &:focus,
        &:hover {
          & > .bookmark-content {
            background-color: var(--color-bookmark-tree-bookmark-hover);
          }
        }
      }
    }
  }
}
